<!--
 * @Author: WLang
 * @LastEditors: WLang
 * @Description: 
 * @Date: 2023-07-04 13:10:54
 * @LastEditTime: 2023-07-19 16:54:19
 * @FilePath: \myblog\src\components\base\BaseCircleMenu.vue
-->
<template>
  <div class="blog-circle--menu">
    <el-button class="blog-circle-menu--btn" size="medium" @click="clickMenu(item)" :icon="item.icon" v-for="item in menuList" :key="item.icon" circle>
    </el-button>
    <el-button class="blog-circle-menu--btn" size="medium" @click="clickMenu(exceMenu)" v-if="exceMenu" key="likes" :class="{active: isLike}" :icon="exceMenu.icon" circle>
    </el-button>
  </div>
</template>

<script>
import { createNamespacedHelpers} from 'vuex'
const {mapGetters, mapActions} = createNamespacedHelpers('like');
import MINXIN from '@/core/mixin'
export default {
  mixins: [MINXIN],
  components:{},
  data(){
    return {
    }
  },
  props: {
    btnlist: {
      type: Array
    }
  },
created(){},
mounted(){},
watch:{},
computed:{
  ...mapGetters({
    localLike: 'isLike'
  }),
  isLike() {
    let aid = this.$route.params.id
    return this.localLike(aid)
  },
  menuList() {
    return this.btnlist.filter(item => {
      return !item.exce
    })
  },
  exceMenu() {
    return this.btnlist.filter(item => {
      return item.exce
    })[0]
  }  
},
methods:{
  ...mapActions(['pushLike', 'pullLike', 'sendLikes']),
  handlerLikeArticle() {
    let aid = this.$route.params.id
    //点击 为文章点赞或取消点赞
    this[this.isLike ? 'pullLike' : 'pushLike']({aid})
    this.sendLikes({aid});
    this.$EventBus.$emit('addLike');
  },
  addColumn () {
    this.refresModal('postColumn')
  },
  handlerFousTextarea() {
    this.$EventBus.$emit('focusTextarea')
  },
  clickMenu(item) {
    let {router, handler} = item;
    if (router) {
      this.$router.push(router);
    }
    if (handler) {
      this[handler] && this[handler]()
    }
  },
},
}
</script>
<style lang="scss" scoped>
.blog-circle--menu {
  margin-top: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  .blog-circle-menu--btn {
    width: 60px;
    height: 60px;
    margin: 10px;
    &:hover {
      background-color: #fff;
      border: none;
    }
    &:focus {
      color: #606266;
      background-color: #fff;
    }
  }
  .blog-circle-menu--btn.active {
    color: #3a8ee6
  }
}
</style>